<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="top-bar">我的学习强国</view>
    <!-- 中间内容区 -->
    <view class="content">
      <image src="/static/love_china.png" mode="widthFix" class="center-image"></image>
      <text class="center-text">我来自互联201，我叫李伶俐</text>
    </view>
    <!-- 底部选项卡 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
        <image src="/static/tab1.png" mode="widthFix" class="tab-icon"></image>
        <text class="tab-text">强国通</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
        <image src="/static/tab2.png" mode="widthFix" class="tab-icon"></image>
        <text class="tab-text">百灵</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)">
        <image src="/static/tab3.png" mode="widthFix" class="tab-icon"></image>
        <text class="tab-text">学习</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 3 }" @click="switchTab(3)">
        <image src="/static/tab4.png" mode="widthFix" class="tab-icon"></image>
        <text class="tab-text">电视台</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 4 }" @click="switchTab(4)">
        <image src="/static/tab5.png" mode="widthFix" class="tab-icon"></image>
        <text class="tab-text">电台</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, // 当前选中的选项卡索引
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-bar {
  background-color: #e6162d;
  color: #fff;
  text-align: center;
  padding: 20rpx 0;
  font-size: 36rpx;
  font-weight: bold;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.center-image {
  width: 200rpx;
  margin-bottom: 30rpx;
}

.center-text {
  font-size: 32rpx;
  color: #666;
}

.tab-bar {
  display: flex;
  border-top: 1px solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx 0;
}

.tab-icon {
  width: 50rpx;
}

.tab-text {
  font-size: 24rpx;
  margin-top: 5rpx;
}

.active .tab-text {
  color: #e6162d;
}
</style>